/**
* @file 撤回弹框
* @author 张超
* @created 2023/8/31 08:00
* @updated 2023/8/31 18:00
*/
<template>
	<view class="wxpup">
		<view class="shade" v-if="showPup" @click="hidePop">
			<view class="pop" :style="popStyle" :class="{'show':showClass}">
				<view v-for="(item,index) in navList" :key="index" @click="change(item)">
					<!-- <image src="" mode="" v-if="item.text == '删除'"></image> -->
					<image src="/static/chehui.png" mode="" v-if="item.text == '撤回'"></image>
					<image src="/static/fuzhi.png" mode="" v-if="item.text == '复制'"></image>
					<!-- <image src="" mode="" v-if="item.text == '预览'"></image>
					<image src="" mode="" v-if="item.text == '下载'"></image>
					<image src="" mode="" v-if="item.text == '收藏'"></image>
					<image src="" mode="" v-if="item.text == '取消收藏'"></image> -->
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'wxpup',
		props: {
			wxPupData: {
				type: Object,
				required: true,
				default: 1
			},
			showPup: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			wxPupData(e, oldVal) {
				if (JSON.stringify(oldVal) == "{}") {
					this.showPup = false;
					return;
				}
				let [touches, style, index, ] = [e.touches[0], "", e.currentTarget.dataset.index];

				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (this.winSize.height / 2)) {
					style = `bottom:${this.winSize.height-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (this.winSize.witdh / 2)) {
					style += `right:32rpx`;
				} else {
					style += `left:32rpx`;
				}
				// style：计算出弹窗在页面显示的位置
				this.popStyle = style;

				/*
				 * 计算时长，m<2：2分钟以内可以撤回，用户id用来判断只能撤回我自己发送的内容
				 * type：0删除，1撤回，2转发，3预览，4下载，5收藏，6取消收藏，
				 * navList：可根据数据信息，自行组合navList需要显示的内容。
				 */
				let timestamp = Date.parse(new Date());
				// let start = e.item.createtime * 1000; //2017-4-10 10:00
				let start = 1693472400000;
				let end = timestamp; //2017-5-10 10:00
				let utc = Math.abs(end - start);
				let m2 = utc / (60 * 1000)
				let m = Math.round(m2)
				m = 1
				if (m < 2) {
					this.navList = [{
						text: '撤回',
						type: 1
					},
					{
						text: '复制',
						type: 2
					}]
				}
				// if (e.item.user_id == e.my_user_id && m < 2) {
				// 	this.navList = [{
				// 		text: '预览',
				// 		type: 3
				// 	}, {
				// 		text: '删除',
				// 		type: 0
				// 	}, {
				// 		text: '撤回',
				// 		type: 1
				// 	}]
				// } else {
				// 	this.navList = [{
				// 		text: '预览',
				// 		type: 3
				// 	}, {
				// 		text: '删除',
				// 		type: 0
				// 	}]
				// }

				// 显示弹窗
				this.showPup = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showClass = true;
					}, 10);
				});
			},
		},
		data() {
			return {
				navList: [],
				popStyle: "",
				showPup: false,
				showClass: false,
				winSize: {},
			}
		},
		mounted() {
			this.getWindowSize();
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
		},
		methods: {
			/*
			 * change(item)
			 * item.type：0删除，1撤回，2复制，3预览，4下载，5收藏，6取消收藏，
			 * item.msg_type：消息类型video,text,image,
			 * change方法中，根据type操作类型和msg_type消息类型，来判断需要进行的具体操作。
			 */
			change(item) {
				console.log(item.type)
				console.log(item.msg_type)
				// 根据type和msg_type来判断具体需要调用下方哪个方法。
				if (item.type == 1) {
					this.msgRevoke()
				}
				if(item.type==2){
					this.copyText(this.wxPupData.item.payload.text)
				}
			},
			// 复制
			copyText(text) {
				const textToCopy = text;
				uni.setClipboardData({
					data: textToCopy,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			// 图片操作
			changeImg(type) {
				if (type == 3) {
					// 图片预览
					let arr = [];
					arr.push(this.$imgUrl + this.wxPupData.item.content)
					uni.previewImage({
						urls: arr,
					});
				} else if (type == 4) {
					// 图片下载
					// #ifdef H5
					location.href = this.$imgUrl + this.wxPupData.item.content;
					// #endif
					// #ifdef APP-PLUS
					this.$saveImageToPhotosAlbum(this.$imgUrl + this.wxPupData.item.content)
					// #endif
				}
			},
			// 文件视频操作
			changeFile(type) {
				if (type == 4) {
					// 下载
					// #ifdef H5
					location.href = this.$imgUrl + this.wxPupData.item.content;
					// #endif

					// #ifdef APP-PLUS
					uni.showLoading({
						title: '正在下载'
					});
					var url = this.$imgUrl + this.wxPupData.item.content;
					let dtask = plus.downloader.createDownload(url, {
						//本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，这时用户文件管理器能看到的了，之后创建连信作为文件夹，后缀是用于文件命名和格式修改，大家可以使用变量。
						filename: "file://storage/emulated/0/我的APP/" + this.wxPupData.item
							.file_name //利用保存路径，实现下载文件的重命名
					}, (d, status) => {
						//d为下载的文件对象
						if (status == 200) {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '已保存到文件夹：/我的APP/' + this.wxPupData.item.file_name, //保存路径
								duration: 3000,
							});
							//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
							let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
							setTimeout(() => {
								plus.runtime.openFile(d.filename); //选择软件打开文件
							}, 1500)
						} else {
							//下载失败
							uni.hideLoading();
							plus.downloader.clear(); //清除下载任务
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '下载失败，请稍后重试',
							});
						}
					})
					dtask.start();
					// #endif
				}
			},


			// 撤回
			msgRevoke() {
				if (this.wxPupData.item.payload.data != null) {
					const hongbDa = JSON.parse(this.wxPupData.item.payload.data)
					if (hongbDa.data === 'hongb') {
						uni.showToast({
							title: "红包禁止撤回",
							icon: "none",
							duration: 2000,
						});
						return;
					}
				} else {
					uni.$TUIKit.revokeMessage(this.wxPupData.item).then(imResponse => {
						// 消息撤回成功
						console.log(imResponse, '撤回成功')
						uni.showToast({
							title: "撤回成功",
							icon: "none",
							duration: 2000,
						});
					}).catch(function(imError) {
						// 消息撤回失败
						console.warn(imError, '无法撤回');
						uni.showToast({
							title: '无法撤回',
							icon: "none",
							duration: 2000,
						});
					});
				}

			},
			// 删除
			msgDelete() {
				this.$http.post("/api/***", {
					id: this.wxPupData.item.id,
					session_id: this.wxPupData.item.session_id,
				}).then(res => {
					if (res.code == 1) {
						this.$emit('getNewList')
					}
				})
			},
			// 收藏
			msgFavAdd() {
				this.$http.post("/api/***", {
					msg_id: this.wxPupData.item.id,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '收藏成功',
						});
						this.$emit('getNewList');
					}
				})
			},
			// 取消收藏
			msgFavCancel() {
				this.$http.post("/api/***", {
					msg_id: this.wxPupData.item.msg_id,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '已取消',
						});
						this.$emit('getNewList');
					}
				})
			},

			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 隐藏弹窗 */
			hidePop() {
				this.showClass = false;
				this.showPup = false;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.wxpup {

		/* 遮罩 */
		.shade {
			position: fixed;
			z-index: 100;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			-webkit-touch-callout: none;

			.pop {
				position: fixed;
				z-index: 101;
				color: #333;
				background: #596084;
				border-radius: 12rpx;
				transition: transform 0.15s ease-in-out 0s;
				user-select: none;
				-webkit-touch-callout: none;
				transform: scale(0, 0);
				display: flex;
				align-items: center;

				&.show {
					transform: scale(1, 1);
				}

				uni-view {
					width: 120rpx;
					height: 140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					uni-image {
						width: 36rpx;
						height: 36rpx;
						display: block;
						margin: 0 auto 8rpx;
					}

					uni-text {
						display: block;
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>